<template>
  <div>
    <div class="searchtimeform">
    <el-form :inline="true" :model='seachtime'>
       <el-form-item label="筛选时间" >
      <el-form-item >
        <el-date-picker type="datetime" placeholder="开始时间" v-model="seachtime.starttime" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker type="datetime" placeholder="结束时间" v-model="seachtime.endtime" style="width: 100%;"></el-date-picker>
      </el-form-item>
  </el-form-item >
    <el-form-item>
         <el-button type="primary" size ="small" icon="search" @click='onScreeoutMoney()'>筛选</el-button>
    </el-form-item>
     <el-form-item class="btnRight">
                    <el-button type="primary" size ="small" icon="view" @click='onAddMoney()'>添加</el-button>
                </el-form-item>
    </el-form>
    </div>
    <el-table
      :data="alltableData"
      style="width: 100%"
      >
      <el-table-column
        label="序号"
        type="index"
        width="180"
        >
      </el-table-column>
      <el-table-column
        prop="date"
        label="创建时间"
        width="180"
        sortable
        >
      </el-table-column>
      <el-table-column
        prop="type"
        label="手指类型">
      </el-table-column>
        <el-table-column
        prop="describe"
        label="手指描述">
      </el-table-column>
       <el-table-column
        prop="income"
        label="收入">
        <template slot-scope="scope">
           <span style="color:#00d053">+</span>
        </template>
        </el-table-column>
        <el-table-column
       align='expend'
        prop="income"
        label="支出">
        <template slot-scope="scope">
           <span style="color:#00d053"></span>
        </template>
        </el-table-column>
         <el-table-column
                    prop="cash"
                    label="账户现金"
                    width="170">
                    <template slot-scope="scope">
                        <span style="color:#4db3ff">{{ scope.row.cash }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    width="220">
                </el-table-column>
       <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-table>
     <div class="block">
<el-pagination
      v-if='paginations.total > 0'
      :page-sizes="paginations.page_sizes"
      :page-size="paginations.page_size"
      :layout="paginations.layout"
      :total="paginations.total"
      :current-page.sync='paginations.page_index'
      @current-change='handleCurrentChange'
      @size-change='handleSizeChange'>
  </el-pagination>
  </div>
  <addandupdateform :dialog='dialog' :form='form'  @update="getProfile"></addandupdateform>
  </div>
</template>

<script>
import addandupdateform from "../components/addandupdateform"

export default {
  data () {
    return {
      seachtime: {
        starttime:'',
        endtime:''
      },
     tableData:[
        {
        type: "1",
        describe: "1",
        income: "1",
        expend: "1",
        cash: "1",
        remark: "1"
      },
       {
        type: "12",
        describe: "12",
        income: "12",
        expend: "12",
        cash: "12",
        remark: "12"
      }
     ],
     form: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      },
      dialog: {
        show: false,
        title: '',
        option: ''
      },
      alltableData:[],
      filteTableData: [],
      paginations: {
        page_index: 1, //当前位于第一页
        total:0 ,//总数
        page_size:5, // 一页显示5条
        page_sizes: [5,10,15,20],  //每页显示多少条数据
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      }
    }
  },
  created() {
    this.getProfile()
  },
  components: {
    addandupdateform
  },
  methods: {
    getProfile() {
      this.$axios('api/profiles').then(res => {
        this.alltableData = res.data
        // console.log( this.alltableData)
        this.tableData = res.data
        this.setPaginations()
      })
    },
    onScreeoutMoney(){
      console.log(1111)
    },
      handleEdit(row){
        console.log(row)
         this.dialog = {
          show:true,
          title:'xg基金信息',
          option:'edit'
        },
        this.form= {
          type: row.type,
          describe: row.describe ,
          income: row.income,
          expend: row.expend,
          cash: row.cash,
          remark: row.remark,
          id: row._id
        }

      },
        //点击删除
     async handleDelete(row) {
     await  this.$axios.delete(`/api/profiles/delete/${row._id}`)
      this.$message("success")
      this.getProfile()
      },
        //添加
      onAddMoney () {
        this.dialog = {
          show:true,
          title:'添加基金信息',
          option:'add'
        },
        this.form= {
          type: "",
          describe: "",
          income: "",
          expend: "",
          cash: "",
          remark: "",
          id: ""
        }
      },
      // 第一页的数据


       // 改变分页的条数
     handleSizeChange(page_size) {
        // this.paginations.total = this.alltableData.length
        this.paginations.page_index =1
        this.paginations.page_size =page_size
        this.tableData = this.alltableData.filter((item,index) => {
          return index < this.paginations.page_size
        })

      },
       // 点击1，2，3页数跳转
      handleCurrentChange(page) {
        // console.log(`当前页: ${val}`);
        let sortnum =  this.paginations.page_size*(page -1)
        let table = this.alltableData.filter ((item,index) => {
          return index>= sortnum
        })
        this.tableData = table.filter((item,index) => {
          return index< this.paginations.page_size
        })

      },
      //默认第一页数据
      setPaginations() {
        this.paginations.total = this.alltableData.length
        this.paginations.page_index =1
        this.paginations.page_size=5

        this.tableData = this.alltableData.filter((item, index) => {
          return index < this.paginations.page_size
        })
      }
  }

}
</script>

<style scoped>
.searchtimeform{

margin-top: 10px;
text-align: center

}
.block{
  text-align: center
}
</style>
